<template>
	<view class="page">
		<view class="h30"></view>
		<view class="flex-SB" @click="showCal = true"
			style="width: 280rpx;margin: 0 auto;color: #1D6EFA;font-size: 28rpx;">
			<u-icon color="#1D6EFA" name="arrow-left"></u-icon>
			<view>{{dateTime}}</view>
			<u-icon color="#1D6EFA" name="arrow-right"></u-icon>
		</view>
		<view class="h30"></view>
		<view class="blocks">
			<view style="padding: 20rpx 40rpx;color: #333333;">
				<view class="flex-SB">
					<view>睡眠状态趋势图</view>
					<view style="font-size: 20rpx;color: #aaa;"></view>
				</view>
				<view class="flex-SB">
					<view style="font-size: 66rpx;font-weight: bold;">{{formatHmObj(allSleep).hour}}<text
							style="font-size: 24rpx;margin-left: 6rpx;">小时</text>{{formatHmObj(allSleep).min}}<text
							style="font-size: 24rpx;margin-left: 6rpx;">分钟</text></view>
				</view>
				<view style="font-size: 20rpx;color: #aaa;">{{lastTime}}</view>
			</view>
			<view style="width: 686rpx;height: 220px;">
				<l-echart ref="tiredChartDetails"></l-echart>
			</view>
			<view class="flex-SB">
				<view style="width: 50%;color: #BBBBBB;font-size: 24rpx;text-align: center;">入睡 {{sleepStart}}</view>
				<view style="width: 50%;color: #BBBBBB;font-size: 24rpx;text-align: center;">醒来 {{sleepEnd}}</view>
			</view>
			<view style="    display: flex;justify-content: center;align-items: center;">
				<view class="CF-blocks" style="font-size: 28rpx; display: flex;align-items: center;font-weight: 900;color: #333333;margin: 20rpx;">
					<view class="CF-dots" style="background:#8a4efb;"></view>
					<view style="margin: 0 15rpx;">深睡</view>
<!-- 					<view style="margin-left: 20rpx;">
						{{deepPre}}%
					</view> -->
				</view>
				<view class="CF-blocks" style="font-size: 28rpx; display: flex;align-items: center;font-weight: 900;color: #333333;margin: 20rpx;">
					<view class="CF-dots" style="background:#39c0ed;"></view>
					<view style="margin: 0 15rpx;">浅睡</view>
<!-- 					<view style="margin-left: 20rpx;">
						{{lighPre}}%
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="blocks flex-SB" style="background-color: transparent;padding-bottom: 30rpx;margin-top: 30rpx;">
			<view class="c-box">
				<view class="CF-blocks" style="font-size: 28rpx; display: flex;align-items: center;font-weight: 900;color: #333333;margin: 20rpx;">
					<view class="CF-dots" style="background:#8a4efb;width: 30rpx;height: 30rpx;"></view>
					<view style="margin: 0 15rpx;">深睡</view>
					<view style="margin-left: 50rpx;color: #AAAAAA;">
						{{deepPre}}%
					</view>
				</view>
				<view class="c-block">
					<view class="flex-SB">
						<view style="font-size: 66rpx;color: #8a4efb;font-weight: bold;">{{formatHmObj(deepSleep*60000).hour}}<text
								style="font-size: 24rpx;margin:0 12rpx;">小时</text>{{formatHmObj(deepSleep*60000).min}}<text
								style="font-size: 24rpx;margin-left: 6rpx;">分钟</text></view>
					</view>
				</view>
			</view>
			<view class="c-box">
				<view class="CF-blocks" style="font-size: 28rpx; display: flex;align-items: center;font-weight: 900;color: #333333;margin: 20rpx;">
					<view class="CF-dots" style="background:#39c0ed;width: 30rpx;height: 30rpx;"></view>
					<view style="margin: 0 15rpx;">浅睡</view>
					<view style="margin-left: 50rpx;color: #AAAAAA;">
						{{lighPre}}%
					</view>
				</view>
				<view class="c-block">
					<view class="flex-SB">
						<view style="font-size: 66rpx;color: #39c0ed;font-weight: bold;">{{formatHmObj(lighSum*60000).hour}}<text
								style="font-size: 24rpx;margin:0 12rpx;">小时</text>{{formatHmObj(lighSum*60000).min}}<text
								style="font-size: 24rpx;margin-left: 6rpx;">分钟</text></view>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="showCal">
			<uni-calendar class="uni-calendar--hook" :endDate="maxDate" :showMonth="false" @change="datechange" />
		</u-popup>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import {
		mapState
	} from 'vuex';
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date;
	export default {
		computed: {
			...mapState(['member'])
		},
		components: {
			LEchart,
		},
		data() {
			return {
				lighSum:0,
				lighPre:'-',
				deepPre:'-',
				sleepStart:'-',
				sleepEnd:'-',
				overSleep: '',
				lastTime: '',
				pieData: [],
				allSleep: 0,
				deepSleep: '',
				lightSleep: '',
				rapidEyeMovement: '',
				lucidity: '',
				showCal: false,
				dateTime: `${year}-${month}-${date}`,
				maxDate: `${year}-${month}-${date}`,
				minDate: `${year}-${month}-${date-100}`,
				nowData: null
			};
		},
		onLoad(opt) {
			let {
				dateTime
			} = opt;
			this.dateTime = dateTime
			// this.dateTime = "2025-01-11";
			this.initPage(this.dateTime);;
		},
		methods: {
			initPage(dateTime) {
				this.lighSum = 0;
				this.lighPre = '-';
				this.deepPre = '-';
				this.sleepStart = '-';
				this.sleepEnd = '-';
				this.overSleep =  '';
				this.lastTime =  '';
				this.pieData =  [];
				this.allSleep =  0;
				this.deepSleep =  '';
				this.lightSleep =  '';
				this.rapidEyeMovement =  '';
				this.lucidity =  '';
				
				for(let i in this.$refs){
					this.$refs[i].dispose();
				}
				if(!this.member.imei){
					return this.$toast("请登录后查看您的数据！");
				};
				uni.$u.http.post('/client/watch_health_data/type', {
					imei: this.member.imei,
					type: 9,
					date: dateTime
				}).then(res => {
					if(res.status == 500){
						return this.$toast(res.msg||'获取数据失败！');
					}
					if(res.status!=200) return;
					let data = res.data;
					let deepSleep = 0;
					let lightSleep = 0;
					let rapidEyeMovement = 0;
					let lucidity = 0;
					let initdata = [{
						name: '深睡',
						value: deepSleep,
						itemStyle: {
							color: '#ccc'
						}
					}, {
						name: '浅睡',
						value: lightSleep,
						itemStyle: {
							color: '#ccc'
						}
					}, {
						name: '快速眼动',
						value: rapidEyeMovement,
						itemStyle: {
							color: '#ccc'
						}
					}, {
						name: '清醒',
						value: lucidity,
						itemStyle: {
							color: '#ccc'
						}
					}];
					if (data.deepSleep) {
						deepSleep = Math.floor(data.deepSleep / 1000 / 60);
						initdata[0].value = Math.floor(data.deepSleep / 1000 / 60);
						initdata[0].itemStyle.color = '#8a4efb'
					}
					if (data.lightSleep) {
						lightSleep = Math.floor(data.lightSleep / 1000 / 60);
						initdata[1].value = Math.floor(data.lightSleep / 1000 / 60);
						initdata[1].itemStyle.color = '#22a9e3'
					}
					if (data.rapidEyeMovement) {
						rapidEyeMovement = Math.floor(data.rapidEyeMovement / 1000 / 60);
						initdata[2].value = Math.floor(data.rapidEyeMovement / 1000 / 60);
						initdata[2].itemStyle.color = '#4dc997'
					}
					if (data.lucidity) {
						lucidity = Math.floor(data.lucidity / 1000 / 60);
						initdata[3].value = Math.floor(data.lucidity / 1000 / 60);
						initdata[3].itemStyle.color = '#fe7e26'
					}
					if (data.sumTime) {
						this.allSleep = data.sumTime;
					}

					this.pieData = initdata;
					let date = ['深睡', '浅睡', '快速眼动', '清醒'];
					this.deepSleep = deepSleep;
					this.lightSleep = lightSleep;
					this.rapidEyeMovement = rapidEyeMovement;
					this.lucidity = lucidity;
					this.lighSum = lightSleep + rapidEyeMovement + lucidity;
					
					this.sleepStart = data.start_time.slice(-6)
					this.sleepEnd = data.end_time.slice(-6)
					
					let deepPre = (data.deepSleep/data.sumTime*100)
					let lighPre = 100 - deepPre;
					this.deepPre = deepPre.toFixed(2);
					this.lighPre = lighPre.toFixed(2);
					let sections = res.data.sections;
					let sleepDatas = [];
					for(let i in sections){
						if(sections[i].type == "3"){
							sleepDatas.push({
								value:0-sections[i].time,
								itemStyle:{
									color:'#8a4efb'
								}
							})
						}else{
							sleepDatas.push({
								value:sections[i].time,
								itemStyle:{
									color:'#39c0ed'
								}
							})
						}
					}
					console.log("---",sleepDatas);
					this.initTiredChart(sleepDatas);
					// this.initTiredPie(initdata)
				});
			},
			formatHmObj(sen) {
				let min = Math.floor(sen / 1000 / 60);
				let hours = '';
				let mins = '';
				if (min) {
					if (min >= 60) {
						let nhour = Math.floor(min / 60)
						mins = min - (nhour * 60);
						return {
							hour: nhour,
							min: mins
						}
					}
					return {
						hour: 0,
						min: min
					}
				}
				return {
					hour: 0,
					min: 0
				}
			},
			formatHm(min) {
				let hours = '';
				let mins = '';
				if (min) {
					if (min >= 60) {
						let nhour = Math.floor(min / 60)
						mins = min - (nhour * 60);
						return nhour + '小时' + mins + '分钟';
					}
					return min + '分钟'
				}
				return '0分钟'
			},
			datechange(e) {
				this.showCal = false;
				let dstr = e.fulldate;
				if (this.dateTime == dstr) {
					return;
				}
				this.dateTime = dstr;
				this.initPage(this.dateTime);
			},
			initTiredChart(data) {
				let option = {
					xAxis: {
						// type: 'category',
						show: false,
						type: 'category',
						axisLabel: {
							show: false
						}
					},
					grid: {
						top: 2,
						left: 5,
						right: 65,
						bottom: 0
					},
					yAxis: {
						type: 'value',
						min: -4800000,
						max: 4800000,
						position:'right',
						splitLine: {
							show: false,
							showMaxLine: false,
						},
						axisLabel: {
							color:'#ccc',
							// interval:100,
							formatter: (val) => {
								if (val == 2000000) {
									return '浅度睡眠'
								}
								if (val == -2000000) {
									return '深度睡眠'
								}
								return ''
							}
						},
					},
					series: [{
						data,
						// data: [-120000000, 200000000, 150000000, 80000000, 7000000, 110000000, 1300000000],
						type: 'bar'
					}]
				};
				// console.log("--1-");
				this.$nextTick(() => {
					this.$refs.tiredChartDetails.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
			initTiredPie(data) {
				let option = {
					grid: {
						top: '10%',
					},
					legend: {
						show: false,
						orient: 'vertical',
						left: 'right',
						formatter: '{name}{d}',
					},
					series: [{
						label: {
							show: true,
							position: "inside",
							formatter: (val) => {
								if (val > 0) {
									return '{d}%'
								} else {
									return '';
								}
							}
						},
						radius: ['45%', '70%'],
						data: data,
						type: 'pie',
						padding: 5,
						smooth: true
					}]
				};
				this.$nextTick(() => {
					this.$refs.tiredChartPie.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.CF-dots {
		margin-right: 10rpx;
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		color: #666666;
		background: #ccc;
		font-family: PingFangSC-Regular;
	}

	.index-title {
		height: 48px;
		line-height: 48px;
		font-size: 32rpx;
		font-weight: 700;
		color: #333333;
		margin-left: 20rpx;
	}

	.details-text {
		height: 16px;
		line-height: 16px;
		font-size: 14px;
		color: #333;
		margin-right: 2px;
	}
	.c-box{
		width: 333rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.c-head-title{
		color: #777777;
		font-size: 20rpx;
		padding: 10rpx;
	}
	.c-head-pode{
		color: #333333;
		font-size: 48rpx;
		font-weight: bold;
	}
	.c-head-date{
		color: #aaaaaa;
		font-size: 20rpx;
		line-height: 28rpx;
	}
	.c-head-box{
		padding: 10rpx;
	}
	.c-img{
		width: 80rpx;
		height: 80rpx;
	}
	.c-block{
		display: flex;
		    justify-content: center;
		    align-items: center;
	}
</style>